<template>
  <div class="user-ai-main-div">
    <div class="user-ai-avatar">
      <el-avatar class="ai-avatar" :icon="ChatRound"></el-avatar>
    </div>

    <div class="triangle-top-right"></div>

    <div class="bubble-right"
         v-html="content"
    ></div>
  </div>
</template>

<script setup lang="ts">
import {ChatRound} from "@element-plus/icons-vue";

const props = defineProps({
  content: {
    type: String,
    required: true
  }
})
</script>

<style scoped>
.user-ai-main-div {
  display: flex;
  align-items: flex-start;
}

.user-ai-avatar {
  width: 40px;
}

.triangle-top-right {
  position: relative;
  border-top: 4px solid #409eff;
  border-right: 4px solid transparent;
  margin-top: 20px;
  margin-right: 2px;
  margin-left: 4px;
}

.bubble-right {
  text-align: justify;
  border-radius: 4px;
  padding: 4px;
  border: 2px solid #409eff;
  font-size: 12px;
  line-height: 16px;
  margin-top: 10px;
  max-width: 80%;
}
</style>